<template>
    <div class="popProject-select">
        <el-dialog title="选择服务" :visible.sync="dialogVisible" top="5vh">
            <div class="search-box-select">
                <el-form :model="searchform">
                    <el-form-item>
                        <el-select
                            v-model="searchform.shopid"
                            class="sele-w"
                            @change="changeList"
                        >
                            <el-option
                                v-for="item in shop_ls_data"
                                :key="item.shopid"
                                :label="item.name"
                                :value="item.shopid"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select
                            v-model="searchform.staffid"
                            class="sele-w"
                            @change="changeList"
                        >
                            <el-option
                                v-for="item in ucp_ls_data"
                                :key="item.uid"
                                :label="item.name"
                                :value="item.uid"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select
                            v-model="searchform.order_type"
                            @change="changeList"
                        >
                            <el-option
                                v-for="item in order_type_data"
                                :key="item.order"
                                :label="item.name"
                                :value="item.order"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div class="list-box" v-infinite-scroll="loadFun">
                <div class="list" v-if="list_data.length > 0">
                    <div
                        class="list-row"
                        v-for="item in list_data"
                        :key="item.id"
                        @click="cheproject(item)"
                    >
                        <div class="list-info">
                            <div class="img-box">
                                <img
                                    :src="
                                        item.img_small
                                            ? item.img_small
                                            : img_buf
                                    "
                                    alt=""
                                />
                            </div>
                            <div class="info-box">
                                <div class="title">
                                    <span>{{ item.title }}</span>
                                </div>
                                <div class="phone">
                                    <span>{{ item.shop_name }}</span>
                                    <span>有效期：{{ item.endtime_txt }}</span>
                                </div>
                                <div class="tiem">
                                    <span>剩余{{ item.serv_left }}次</span>
                                    <span
                                        class="qty"
                                        v-if="item.is_existence"
                                        >{{ item.serv_qty }}</span
                                    >
                                </div>
                            </div>
                        </div>
                        <div class="list-avitve" v-show="item.is_avitve">
                            <i class="el-icon-check"></i>
                        </div>
                    </div>
                </div>
                <empty v-else />
            </div>

            <span slot="footer" class="dialog-footer">
                <div class="num">已选数量：{{ selectedNum }}</div>
                <div class="but">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="determineFun"
                        >确 定</el-button
                    >
                </div>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import staticConst from "../../js/const/StaticConst.js";
import config from "@/js/conf/Config.js";
import empty from "../comm/empty.vue";

export default {
    name: "popProjectSelect",
    props: ["page_i"],
    components: { empty },

    data() {
        return {
            img_buf: staticConst.GOOD_IMG,
            dialogVisible: false,
            is_soll: false,
            list_data: [],
            existenceListData: [],
            selectedData: [],
            selectedInfo: null,
            selectedNum: 0,
            searchform: {
                shopid: "",
                staffid: "",
                order_type: "",
                pnum: 20,
                pfrom: -20,
                ch: "1",
                customerid: "",
            },
            selectType: "1",
            shop_ls_data: [
                {
                    name: "全部门店",
                    shopid: "",
                },
            ],
            ucp_ls_data: [
                {
                    name: "全部经手人",
                    uid: "",
                },
            ],
            order_type_data: [
                {
                    name: "全部排序",
                    order: "",
                },
            ],
        };
    },
    methods: {
        initData(data) {
            this.searchform.customerid = data.customerid;
            this.selectType = data.selectType;
            this.existenceListData = data.existenceListData;
            this.dialogVisible = true;
            this.changeList();
        },

        getselectedNum(data) {
            this.selectedNum = 0;
            data.map((v) => {
                if (v.is_existence || v.is_avitve) {
                    this.selectedNum++;
                }
            });
        },

        // 确定服务选择
        determineFun() {
            if (this.selectedData.length > 0 || this.selectedInfo) {
                if (this.selectType == 1) {
                    const data = this.selectedData;
                    const ids = data.map((v) => v.shopid);
                    const idsSet = new Set(ids);
                    if (idsSet.size > 1 && data.length > 1) {
                        this.$msg({ title: "服务所属门店不一致" });
                    } else {
                        this.$emit("getProjectData", data, this.selectType);
                        this.dialogVisible = false;
                    }
                } else {
                    const data = this.selectedInfo;
                    this.$emit("getProjectData", data, this.selectType);
                    this.dialogVisible = false;
                }
            }
        },

        // 选中服务
        cheproject(item) {
            if (item.is_existence && this.selectType == 2) {
                this.$msg({ title: "该服务已选" });
                return;
            }
            item.is_avitve = !item.is_avitve;
            this.selectedData = [];
            if (this.selectType == 1) {
                this.list_data.map((v) => {
                    if (v.is_avitve) {
                        this.selectedData.push(v);
                    }
                });
                this.selectedNum = this.selectedData.length;
            } else {
                this.list_data.map((v) => {
                    if (v.proid == item.proid) {
                        v.is_avitve = true;
                        this.selectedInfo = v;
                    } else {
                        v.is_avitve = false;
                    }
                });
            }
        },

        // 滚动加载
        loadFun() {
            if (this.is_soll) return;
            this.searchform.pfrom += 20;
            this.getlistdata();
        },

        // 筛选服务
        changeList() {
            this.emptyData();
            this.getlistdata();
        },

        // 获取服务列表
        async getlistdata() {
            this.is_soll = true;
            let url = config.YY_YUYUE_BOOK_MYORI_LS;
            let param = Object.assign({}, this.searchform);
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                if (res.data.config && res.data.config.shop_ls) {
                    this.shop_ls_data =
                        this.shop_ls_data.length == 1
                            ? this.shop_ls_data.concat(res.data.config.shop_ls)
                            : this.shop_ls_data;
                }

                if (res.data.config && res.data.config.ucp_ls) {
                    this.ucp_ls_data =
                        this.ucp_ls_data.length == 1
                            ? this.ucp_ls_data.concat(res.data.config.ucp_ls)
                            : this.ucp_ls_data;
                }

                if (res.data.config && res.data.config.order_type) {
                    this.order_type_data =
                        this.order_type_data.length == 1
                            ? this.order_type_data.concat(
                                  res.data.config.order_type
                              )
                            : this.order_type_data;
                }

                if (res.data.ls) {
                    res.data.ls.map((v) => {
                        v.is_avitve = false;
                        if (this.existenceListData.length > 0) {
                            this.existenceListData.map((vs) => {
                                if (vs.proid == v.proid) {
                                    v.serv_qty = vs.serv_qty;
                                    v.is_existence = true;
                                    if (this.selectType == 1) {
                                        v.is_avitve = true;
                                    }
                                }
                            });
                        }
                    });

                    this.list_data = this.list_data.concat(res.data.ls);
                    this.getselectedNum(this.list_data);
                    setTimeout(() => {
                        this.is_soll = false;
                    }, 200);
                } else {
                    this.is_soll = true;
                }
            }
        },

        // 清空数据
        emptyData() {
            this.searchform.pfrom = 0;
            this.list_data = [];
            this.selectedData = [];
            this.is_soll = false;
        },
    },
};
</script>

<style lang="scss" scoped>
.popProject-select {
    ::v-deep.search-box-select {
        .el-form {
            display: flex;
        }
        .sele-w {
            margin-right: 10px;
        }
    }
}
.dialog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .num {
        font-size: 14px;
    }
}
.list-box {
    height: 500px;
    overflow: auto;
    .list-row {
        padding: 10px 0;
        border-bottom: 1px #f2f2f2 solid;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 30px;
        cursor: pointer;
        .list-info {
            display: flex;
            .img-box {
                width: 80px;
                height: 80px;
                margin-right: 10px;
                border-radius: 5px;
                background: #eaeaea;
                overflow: hidden;
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                span {
                    font-size: 16px;
                    font-weight: bold;
                }
            }
            .info-box {
                .title {
                    font-size: 14px;
                }
                .phone {
                    font-size: 12px;
                    color: #9c9a9a;
                    margin: 5px 0;
                    span {
                        margin-right: 10px;
                    }
                }
                .tiem {
                    width: 100%;
                    font-size: 12px;
                    .qty {
                        padding: 0 10px;
                        background: #3388ff;
                        color: #fff;
                        font-size: 12px;
                        margin-left: 10px;
                    }
                }
            }
        }
        .list-avitve {
            font-size: 20px;
            color: #3388ff;
        }
    }
}
.list-box::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.list-box::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
    background: #ccc; //rgba(0, 0, 0, 0.0);
    scrollbar-arrow-color: red;
}
.list-box::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0);
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
}
</style>